<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			title="添加（新人）推广" @clickLeft="goBack"></uni-nav-bar>
		<!-- <view class="top">

			<image src="@/static/img/san.png" class="san" @tap="goBack()"></image>
			<view class="title">
				添加（新人）推广
			</view>
		</view> -->
		<view class="main">
			<!-- 基本信息表单组 -->
			<view class="form-group">
				<view class="form-group-title">基本信息</view>
				<view class="form-card">
					<view class="li">
						<text class="label">推广位置</text>
						<!-- 		<view class="bor" @tap="chooseLocation">
							<input v-model="form.promotionsRequest.promoteLocation" placeholder="点击选择位置" disabled />					
						</view> -->
						<view class="bor">
							<picker mode="selector" :range="addressArr" range-key="description"
								@change="bindaddressChange" v-model="form.promotionsRequest.promoteLocation">
								<view class="picker">
									{{ addressArr[Addressindex].description }}
								</view>
							</picker>
						</view>
						<view class="address-btn" @click="nato('/pages/address/address')">
							<text class="btn-icon">📍</text>
							<text class="btn-text">管理</text>
						</view>



					</view>

					<view class="li">
						<text class="label">推广范围</text>
						<view class="bor">
							<picker @change="bindTGFW" :value="form.promotionsRequest.promotionScope" :range="TGFW">
								<view class="uni-input">{{ TGFW[selIndex.TGFWIndex] }}</view>
							</picker>
						</view>
						<text class="li_right">m</text>
					</view>

					<view class="li">
						<text class="label">推广个数</text>
						<view class="bor">
							<picker @change="bindTGGS" :value="form.promotionsRequest.promotionCount" :range="TGGS">
								<view class="uni-input">{{ TGGS[selIndex.TGGSIndex] }}</view>
							</picker>
						</view>
						<text class="li_right">个</text>
					</view>
				</view>
			</view>

			<!-- 问答抽奖表单组 -->
			<view class="form-group">
				<view class="form-group-title">问答抽奖</view>
				<view class="form-card">
					<view class="rows">
						<text class="rows_label">问题图片</text>
						<view class="wen_bor" @click='uploadpic("questionImgs")'>
							<image v-if="form.questionImgs" :src="form.questionImgs" class="preview-image"></image>
							<view v-else class="upload-placeholder">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传图片</text>
							</view>
							<!-- <text class="upload-icon">+</text> -->
						</view>
						<!-- 	<image v-if="form.questionImgs" :src="form.questionImgs" class="preview-image"></image>
						<view v-else class="upload-placeholder">
							<text class="upload-icon">+</text>
							<text class="upload-text">上传图片</text>
						</view> -->
						<text class="upload-desc">商家logo/门头照片</text>
					</view>

					<view class="rows">
						<text class="rows_label">问题类别</text>
						<view class="rows_ins">
							<picker mode="selector" :range="QuestionArr" range-key="question" @change="bindQuestion"
								v-model="form.promotionsNewComerQuestionRequest.questionId">
								<view class="picker">
									{{ QuestionArr[selIndex.QuestionIndex].question }}
								</view>
							</picker>
						</view>
					</view>

					<view class="rows">
						<text class="rows_label">正确答案</text>
						<view class="rows_ins">
							<input v-model="Answer.Answer1" placeholder="请输入正确答案" />
						</view>
					</view>

					<view class="rows" v-for="(index) in 3" :key="index">
						<text class="rows_label">其他答案</text>
						<view class="rows_ins">
							<input v-model="Answer['Answer' + (index + 2)]" :placeholder="'请输入其他答案' + index" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="apple" @tap="handlePayment">
			<text>发布推广</text>
		</view>

		<tuiFoot></tuiFoot>
	</view>
</template>

<script>
	import tuiFoot from '@/components/red/foot.vue';
	import QQMapWX from "@/common/qqmap-wx-jssdk.min.js";
	import {
		map,
		mapbbanner
	} from "@/api/map";
	import {
		examine_data
	} from "@/api/examine";
	import {
		range_index
	} from "@/api/range";
	import {
		number_index
	} from "@/api/number";
	import {
		renbao_index
	} from "@/api/renbao";
	import {
		wenti_index
	} from "@/api/wenti";
	import {
		promotion,
		CreateOrderByMiniProgram,
		GetDicData,
		GetQuestion,
		PromotionInsert,
		GetPromotionUserAddressList
	} from "@/api/promotion";
	export default {
		components: {
			tuiFoot
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '10:00',
				selIndex: {
					TGGSIndex: 0,
					TGFWIndex: 0,
					HBEDIndex: 0,
					QuestionIndex: 0
				},
				Answer: {
					"Answer1": "",
					"Answer2": "",
					"Answer3": "",
					"Answer4": ""
				},
				form: {
					promotionsRequest: {
						"openId": "",
						"promotionUsersId": 0,
						"promoteLocation": "",
						"promotionScope": "",
						"promotionCount": 0,
						"promotionAmount": 0,
						"questionImgs": "",
					},
					"promotionsNewComerQuestionRequest": {
						"promotionsId": 0,
						"questionId": 0
					},
					"promotionsNewComerAnswerRequests": [],
					"newComerLuckyDrawRedEnvelopeRequest": {
						"promotionsId": 0,
						"redEnvelopeCount": 0,
						"redEnvelopeAmount": 0,
						"luckyDrawDate": ""
					},
					"questionImgs": ""
				},
				sumAmount: 0,
				paymentAmount: 0.1, // Fixed payment amount in yuan
				HBED: [],
				TGFW: [],
				TGGS: [],
				QuestionArr: [],
				// index: 0,
				addressArr: [],
				Addressindex: 0,
				domain: this.$config.HTTP_REQUEST_URL,
			}
		},
		async onLoad() {
			// await this.index()
			// await this.range()
			// await this.number()
			// await this.renbao()
			// await this.wenti()
			// await this.promotion_index()
			await this.DicData();
			//await this.getCurrentLocation();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			//this.getLocationMounted();
		},
		methods: {
			// 修改上传图片方法
			async uploadpic(key) {
				// 先检查隐私协议授权
				const hasPrivacyAuth = await this.checkPrivacyAuthorize();
				if (!hasPrivacyAuth) return;

				const that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						const tempFilePath = res.tempFilePaths[0];
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: that.$config.HTTP_REQUEST_URL + '/api/wx/FileUpload/UploadFile',
							filePath: tempFilePath,
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('TOKEN') || ''
							},
							success: (uploadRes) => {
								uni.hideLoading();
								try {
									const data = JSON.parse(uploadRes.data);
									if (data.status === 0) {
										var path = data.data.replace(/\\/g, '/');
										that.form[key] = `${that.domain}${path}`;
										if (key == 'PromotionImgs') {
											var fileName = data.remark;
											if (that.isImageFile(fileName)) {
												that.uptype = 1
											} else {
												that.uptype = 0
											}
										}

										uni.showToast({
											title: '上传成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: data.message || '上传失败',
											icon: 'none'
										});
									}
								} catch (e) {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
								}
							},
							fail: (error) => {
								uni.hideLoading();
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败：', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},

			nato(url) {
				uni.navigateTo({
					url
				})
			},
			setMoney() {

				var redEnvelopeCount = parseInt(this.form
					.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeCount);
				var redEnvelopeAmount = parseFloat(this.form
					.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeAmount);
				var promotionCount = parseInt(this.TGGS[this.selIndex.TGGSIndex]);
				var promotionAmount = parseFloat(this.HBED[this.selIndex.HBEDIndex]);
				this.sumAmount = redEnvelopeCount * redEnvelopeAmount + promotionCount * promotionAmount;
			},
			handlePayment() {

				// promotionsRequest: {
				// 	"openId": "",
				// 	"promotionUsersId": 0,
				// 	"promoteLocation": "",
				// 	"promotionScope": "",
				// 	"promotionCount": 0,
				// 	"promotionAmount": 0
				// },

				this.form.promotionsRequest.openId = this.$store.state.user.openid;
				this.form.promotionsRequest.PromotionUsersId = this.$store.state.user.PromotionId;
				this.form.promotionsRequest.promotionScope = this.TGFW[this.selIndex.TGFWIndex] + "";
				var promotionCount = parseInt(this.TGGS[this.selIndex.TGGSIndex]);
				this.form.promotionsRequest.promotionCount = promotionCount;
				this.form.promotionsRequest.promoteLocation = this.addressArr[this.Addressindex].id + "";
				// var promotionAmount = parseFloat(this.HBED[this.selIndex.HBEDIndex]);
				// this.form.promotionsRequest.promotionAmount = promotionAmount;
				this.form.promotionsRequest.questionImgs = this.form.questionImgs.replace(this.domain, '');

				var questionId = this.QuestionArr[this.selIndex.QuestionIndex].id;
				this.form.promotionsNewComerQuestionRequest.questionId = questionId;


				var AnswerObjyes = [{
					"newComerQuestionId": questionId,
					"newComerAnswer": this.Answer.Answer1,
					"isRight": true
				}];
				var AnswerObjno = [{
					"newComerQuestionId": questionId,
					"newComerAnswer": this.Answer.Answer2,
					"isRight": false
				}, {
					"newComerQuestionId": questionId,
					"newComerAnswer": this.Answer.Answer3,
					"isRight": false
				}, {
					"newComerQuestionId": questionId,
					"newComerAnswer": this.Answer.Answer4,
					"isRight": false
				}];

				var AnswerArr = AnswerObjyes.concat(AnswerObjno);
				this.form.promotionsNewComerAnswerRequests = AnswerArr;

				this.form.newComerLuckyDrawRedEnvelopeRequest.promotionsId = questionId;
				this.form.newComerLuckyDrawRedEnvelopeRequest.luckyDrawDate = new Date(`${this.date} ${this.time}`);
				var redEnvelopeCount = parseInt(this.form
					.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeCount)
				this.form.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeCount = redEnvelopeCount;
				var redEnvelopeAmount = parseFloat(this.form
					.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeAmount)
				this.form.newComerLuckyDrawRedEnvelopeRequest.redEnvelopeAmount = redEnvelopeAmount;

				console.log(JSON.stringify(this.form));
				// return;
				PromotionInsert(this.form)
					.then(res => {
						if (res.status == 0) {
							// this.ApplyMoney();
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								success: () => {
									setTimeout(() => {
										// uni.navigateBack();
										uni.navigateTo({
											url: '/pages/red/promotion'
										})
									}, 1500)
								}
							})
						}else{
							uni.showToast({
								title: res.msg ,
								icon: 'none'
							});
						}
					})
					.catch(res => {
						console.log(res);
					});

			},
			ApplyMoney() {
				var data = {
					AppId: "wx80a16c6d4b037812",
					Description: "发布红包",
					Amount: this.sumAmount * 100,
					OpenId: "o199W5BMle2ELSeH13VWagQkMvvM", //换成正式的
					notifyUrl: "https://oshenghuo.cn/"
				};
				CreateOrderByMiniProgram(data)
					.then(res => {
						if (res != null) {
							let state = res.status;
							if (state == 0) {
								var applydata = res.data[0];
								uni.showModal({
									title: '确认支付',
									content: `确定支付${this.paymentAmount}元吗？`,
									success: (res) => {
										if (res.confirm) {
											// Proceed with payment
											uni.requestPayment({
												// provider: 'wxpay',
												// timeStamp: String(Date.now()),
												// nonceStr: this.generateNonceStr(),
												provider: 'wxpay',
												timeStamp: applydata.timeStamp,
												nonceStr: applydata.nonceStr,
												package: applydata
													.package, // This should come from your backend
												signType: applydata.signType,
												paySign: applydata
													.paySign, // This should be generated by your backend
												success: (res) => {
													uni.showToast({
														title: '支付成功',
														icon: 'success'
													});
													// Handle successful payment
													this.handlePaymentSuccess();
												},
												fail: (err) => {
													uni.showToast({
														title: '支付失败',
														icon: 'none'
													});
													console.error('Payment failed:', err);
												}
											});
										}
									}
								});

							}

						}
					})
					.catch(res => {
						console.log(res);
					});
				// var result=CreateOrderByMiniProgram(data);

				console.log(result)

			},

			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			bindQuestion: function(e) {
				this.selIndex.QuestionIndex = e.detail.value
			},
			bindTGGS: function(e) {
				this.selIndex.TGGSIndex = e.detail.value
			},
			bindTGFW: function(e) {
				this.selIndex.TGFWIndex = e.detail.value
			},
			bindHBED: function(e) {
				this.selIndex.HBEDIndex = e.detail.value
			},
			DicData() {
				GetDicData({
						"Code": "HBED"
					})
					.then(res => {
						var data = res.data;
						var arr = data.map(t => t.value);
						this.HBED = arr;
					})
					.catch(res => {
						console.log(res);
					});
				GetDicData({
						"Code": "TGFW"
					})
					.then(res => {
						var data = res.data;
						var arr = data.map(t => t.value);
						this.TGFW = arr;
					})
					.catch(res => {
						console.log(res);
					});
				GetDicData({
						"Code": "TGGS"
					})
					.then(res => {
						var data = res.data;
						var arr = data.map(t => t.value);
						this.TGGS = arr;
					})
					.catch(res => {
						console.log(res);
					});
				GetQuestion({})
					.then(res => {
						var data = res.data;
						this.QuestionArr = data;
					})
					.catch(res => {
						console.log(res);
					});
				GetPromotionUserAddressList({
						"OpenId": this.$store.state.user.openid
					})
					.then(res => {
						this.addressArr = res.data;
						// this.form.PromotionAddress = this.addressArr[this.Addressindex].id + "";
						this.form.promotionsRequest.promoteLocation = this.addressArr[this.Addressindex].id + "";
					})
					.catch(res => {

					});
			},
			getLocationMounted() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res);
						// this.latitude=res.latitude
						// this.longitude=res.longitude
						this.getAddress(res.latitude, res.longitude); // 根据经纬度获取地址信息
						//this.mapbbanner(res.latitude, thresis.longitude);

					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
			getDistanceFromLatLonInMeters(lat1, lon1, lat2, lon2) {
				var R = 6371e3; // 地球半径，单位为米
				var φ1 = lat1 * Math.PI / 180; // φ, λ in radians
				var φ2 = lat2 * Math.PI / 180;
				var Δφ = (lat2 - lat1) * Math.PI / 180;
				var Δλ = (lon2 - lon1) * Math.PI / 180;

				var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
					Math.cos(φ1) * Math.cos(φ2) *
					Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
				var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

				var d = R * c; // 单位为米
				return d;
			},
			//117.30,34.26
			getAddress(latitude, longitude) {
				map({
						longitude,
						latitude
					})
					.then(res => {

						if (res.data.status == "1") {
							console.log(res.data)
							//regeocode.formatted_address
							// const addressComponent = res.data.regeocode.addressComponent;
							// console.log(addressComponent)
							this.form.address = res.data.regeocode.formatted_address;
							// this.getLocationAndCalculateDistance();
						} else {
							console.error('获取位置信息失败：', res.data);
						}
					})
					.catch(res => {
						console.error('获取位置信息失败catch：', res);
					});



			},
			getLocationAndCalculateDistance() {
				uni.getLocation({
					type: 'gcj02', // 使用 gcj02 坐标系
					success: (res) => {
						const currentLocation = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						const targetLocation = {
							latitude: 34.26,
							longitude: 117.30
						}; // 替换为目标点的实际坐标

						const distance = this.getDistanceFromLatLonInMeters(
							currentLocation.latitude,
							currentLocation.longitude,
							targetLocation.latitude,
							targetLocation.longitude
						);

						console.log(`距离目标点 ${distance.toFixed(2)} 米`);
					},
					fail: (err) => {
						console.error('获取位置失败:', err);
					}
				});
			},
			promotion_index() {
				promotion({

					})
					.then(res => {

					})
					.catch(res => {});
			},
			index() {
				return new Promise((resolve) => {
					examine_data({})
						.then(res => {
							resolve();
						})
						.catch(res => {});
				});
			},
			range() {
				return new Promise((resolve) => {
					range_index({

						})
						.then(res => {
							resolve();
						})
						.catch(res => {});
				});
			},
			number() {
				return new Promise((resolve) => {
					number_index({})
						.then(res => {
							resolve();
						})
						.catch(res => {});
				});
			},
			renbao() {
				return new Promise((resolve) => {
					renbao_index({

						})
						.then(res => {
							resolve();
						})
						.catch(res => {});
				});
			},
			wenti() {
				return new Promise((resolve) => {
					wenti_index({})
						.then(res => {
							resolve();
						})
						.catch(res => {});
				});
			},

			generateNonceStr(length = 32) {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < length; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate() + 1;

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 5;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handlePaymentSuccess() {
				// Handle post-payment logic here
				// For example, navigate to a success page or refresh the data
				uni.navigateTo({
					url: '/pages/success/success'
				});
			},
			getCurrentLocation() {
				const that = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							// 使用腾讯地图SDK进行逆地址解析
							const qqmapsdk = new QQMapWX({
								// key: 'XA3BZ-7NQKA-QHXKW-CMKQJ-O5FWQ-7QFLM' // 使用你的腾讯地图key my
								key: 'SNPBZ-Z62CL-ZYJPM-MTZXE-SON7J-T7BNJ' // 使用你的腾讯地图key red
							});

							qqmapsdk.reverseGeocoder({
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								success: function(addressRes) {
									const address = addressRes.result.address;
									that.form.promotionsRequest.promoteLocation = address;
									// this.getLocationAndCalculateDistance();
									resolve(address);
								},
								fail: function(err) {
									console.error('逆地址解析失败:', err);
									uni.showToast({
										title: '获取地址失败',
										icon: 'none'
									});
									reject(err);
								}
							});
						},
						fail: function(err) {
							console.error('获取位置失败:', err);
							if (err.errMsg.includes('auth deny')) {
								uni.showModal({
									title: '提示',
									content: '需要您授权位置权限才能获取当前位置',
									confirmText: '去设置',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: (settingRes) => {
													if (settingRes.authSetting[
															'scope.userLocation'
														]) {
														that
															.getCurrentLocation();
													}
												}
											});
										}
									}
								});
							} else {
								uni.showToast({
									title: '获取位置失败',
									icon: 'none'
								});
							}
							reject(err);
						}
					});
				});
			},

			chooseLocation() {
				const that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form.promotionsRequest.promoteLocation = res.address;
					},
					fail: function(err) {
						console.error('选择地址失败:', err);
						if (err.errMsg.includes('auth deny')) {
							uni.showModal({
								title: '提示',
								content: '需要您授权位置权限才能选择地址',
								confirmText: '去设置',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						}
					}
				});
			},
			bindaddressChange(e) {
				this.Addressindex = e.detail.value;
				this.form.promotionsRequest.promoteLocation = this.addressArr[this.Addressindex].id + "";
			},
			checkPrivacyAuthorize() {
				return new Promise((resolve) => {
					if (this.privacyAgree) {
						resolve(true);
						return;
					}

					// 获取隐私协议状态
					wx.getPrivacySetting({
						success: (res) => {
							if (res.needAuthorization) {
								// 需要用户授权
								wx.requirePrivacyAuthorize({
									success: () => {
										this.privacyAgree = true;
										resolve(true);
									},
									fail: () => {
										uni.showModal({
											title: '提示',
											content: '需要您同意隐私协议才能使用该功能',
											showCancel: false
										});
										resolve(false);
									}
								});
							} else {
								this.privacyAgree = true;
								resolve(true);
							}
						},
						fail: () => {
							resolve(false);
						}
					});
				});
			},
		}
	}
</script>

<style>
	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.address-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 15rpx;
		background: #fff;
		border: 1px solid #FC0000;
		border-radius: 12rpx;
		margin-left: 10rpx;
	}

	.picker-box {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 12rpx;
		background: #f8f8f8;
		padding: 20rpx;
	}

	.uni-nav-bar {
		position: relative;
		/* 或者绝对定位 */
		z-index: 1999;
		/* 确保在其他元素之上 */
	}

	.container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.san {
		width: 20upx;
		height: 30upx;
		position: absolute;
		left: 0;
	}

	.top {
		display: flex;
		width: 95%;
		margin: 0 auto;
		margin-top: 10%;
		/* position: relative; */
		justify-content: center;
		align-items: center;
		position: sticky;
		/* top: 0; */
		/* background-color: white; */
		padding: 10px;
		z-index: 1000;
		/* Ensure it's above other elements: ; */
		border-bottom: 1px solid #ccc;
	}

	.title {
		text-align: center;
	}

	.main {
		padding: 24rpx;
	}

	.form-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.li {
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
	}

	.li:last-child {
		margin-bottom: 0;
	}

	.label {
		width: 180rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.bor {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 12rpx;
		background: #f8f8f8;
		height: 60rpx;
		padding: 10rpx 24rpx;
		display: flex;
		align-items: center;
	}


	.bor input,
	.bor picker {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
	}

	.li_right {
		margin-left: 16rpx;
		color: #666;
		font-size: 28rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin: 40rpx 0 24rpx;
	}

	.bor2 {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.rows {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.rows:last-child {
		margin-bottom: 0;
	}

	.rows_label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	}

	.rows_ins {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 12rpx;
		background: #f8f8f8;
		height: 60rpx;
		padding: 10rpx 24rpx;
	}

	.rows_ins input,
	.rows_ins picker {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
	}

	.wen_bor {
		width: 200rpx;
		height: 200rpx;
		border: 1px dashed #ddd;
		border-radius: 12rpx;
		margin-right: 24rpx;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.apple {
		position: fixed;
		bottom: 10%;
		left: 24rpx;
		right: 24rpx;
		height: 88rpx;
		background: linear-gradient(to right, #FF4B4B, #FC0000);
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(252, 0, 0, 0.3);
		z-index: 99;
	}

	.apple:active {
		transform: scale(0.98);
	}

	.uni-input {
		font-size: 28rpx;
		color: #333;
	}


	.picker {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	/* 添加输入框占位符样式 */
	input::placeholder {
		color: #999;
		font-size: 28rpx;
	}

	/* 添加过渡动画 */
	.apple,
	.bor,
	.rows_ins {
		transition: all 0.3s ease;
	}

	/* 添加点击反馈 */
	.bor:active,
	.rows_ins:active {
		background: #f0f0f0;
	}

	/* 优化表单分组样式 */
	.form-group {
		margin-bottom: 40rpx;
	}

	.form-group-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 24rpx;
		padding-left: 24rpx;
		position: relative;
	}

	.form-group-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 28rpx;
		background: #FC0000;
		border-radius: 3rpx;
	}

	.yuan {
		color: #FF0000;
		font-weight: 800;
		font-size: 35upx;
		margin-top: 15%;
		width: 100%;
		text-align: center;


	}

	.addlist {
		border: 1px solid #A5A5A5;
		width: 100%;
		height: 80upx;
		margin-top: 5%;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 44upx;
	}

	input {
		width: 80%;
	}

	/* 选择器样式优化 */
	/* 	picker {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
	} */
	/* 	picker {
		height: 1.4rem;
		width: 80%;
	} */
</style>